{{! template-lint-disable no-invalid-interactive }}
<h5 class="viz-bar-chart__title">{{title}}</h5>
<svg version="1.1" class="highcharts-root" xmlns="http://www.w3.org/2000/svg" width="100%" height="{{height}}" viewBox="0 0 {{width}} {{height}}">
  <g class="highcharts-series-group">
    {{#each seriesData as |datum index|}}
      <g class="highcharts-series highcharts-series-0 highcharts-bar-series highcharts-tracker highcharts-series-hover"
         onclick={{action onBarSelect datum}}>
        <rect x="0"
              y="{{datum.yOffset}}"
              height="16"
              width="{{datum.barLength}}"
              rx="2px"
              ry="2px"
              class="highcharts-color-{{index}} viz-bar-chart__bar {{if datum.isFaded
                                                                        "viz-bar-chart__bar--faded"}} {{datum.customColorClass}}">
        </rect>
      </g>
    {{/each}}
    <g class="highcharts-data-labels highcharts-series-0 highcharts-bar-series highcharts-color-0 highcharts-tracker">
      {{#each seriesData as |datum|}}
        <g class="highcharts-label highcharts-data-label  viz-bar-chart__label {{if datum.isFaded "viz-bar-chart__label--faded"}}">
          <text x="0" y="{{datum.labelOffset}}">
            <tspan class="highcharts-emphasized">{{datum.value}}{{labelAppendValue}}</tspan>
            <tspan> | {{get datum labelTagProperty}}</tspan>
          </text>
        </g>
      {{/each}}
    </g>
  </g>
</svg>